<html>
<head>
    <title>读者管理系统</title>
    <link rel="stylesheet" type="text/css" href="/site/css/styles.css">
</head>
<body>
<div id="app">
    <app-header></app-header>
    <app-sidebar></app-sidebar>
    <!--主体内容-->
    <div class="main-content">
        <h3>读者列表</h3>
        <a href="/reader/form">添加读者</a>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>联系电话</th>
                <th>电子邮箱</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="reader in readers" :key="reader.id">
                <td>{{ reader.readerId }}</td>
                <td>{{ reader.name }}</td>
                <td>{{ reader.gender }}</td>
                <td>{{ reader.phone }}</td>
                <td>{{ reader.email }}</td>
                <td>
                    <a :href="`/reader/form?id=${reader.id}`">编辑</a>
                    <a href="#" @click.prevent="confirmDelete(reader.id)">删除</a>
                    <a :href="`/reader/detail?id=${reader.id}`">详情</a>
                </td>
            </tr>
            </tbody>
        </table>

        <p>@edu XXX大学计算机学院 班级:xxx, 学号:xx, 姓名:梁宗焕</p>
    </div>
</div>
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<!-- 引入组件 -->
<script src="/site/js/component/header.js"></script>
<script src="/site/js/component/sidebar.js"></script>
<script>
    const {createApp, reactive, onMounted} = Vue;

    const app = {
        // 使用局部注册的方式注册组件
        components: {
            AppHeader, // 注册 AppHeader
            AppSidebar
        },
        setup() {
            // 使用 ref 定义响应式的书籍列表
            const readers = Vue.ref([]);

            // 封装获取读者列表的方法
            const loadreaders = () => {
                axios.get('/api/reader/')
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            readers.value = response.data.data; // 更新 readers
                        }
                    })
                    .catch(error => {
                        console.error('获取读者列表失败:', error);
                    });
            };

            // 获取读者状态文本
            const getStatusText = (status) => {
                const statusMap = {
                    1: '在馆',
                    2: '外借',
                    3: '未上架'
                };
                return statusMap[status] || '未知';
            };

            // 确认读者删除的方法
            const confirmDelete = (readerId) => {
                if (confirm('确定要删除这本书吗？')) {
                    axios.delete(`/api/reader/${readerId}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                alert('删除成功');
                                loadreaders(); // 刷新读者列表
                            } else {
                                alert(`删除失败: ${response.data.message || '未知原因'}`);
                            }
                        })
                        .catch(error => {
                            // 捕获网络异常或其他错误
                            console.error('网络异常导致删除失败:', error);
                            alert('网络异常, 删除失败，请稍后再试');
                        });
                }
            };

            // 使用 onMounted 在组件挂载时触发加载读者列表
            onMounted(() => {
                loadreaders();
            });

            // 返回响应式数据与方法
            return {readers, getStatusText, confirmDelete};
        }
    };
    createApp(app).mount('#app');
</script>
</body>
</html>